<div class="container">

	<h1 class="page_head">Add Category</h1>

	<form method="post" action="<?php echo URL; ?>category/create">
		<fieldset>
			<legend>
				New Category
			</legend>
			<input type="hidden" value="0" name="size" id="size"/>

			<table>
				<tbody>
					<tr>
						<td><label>Name:</label></td>
						<td>
						<input type="text" name="name" required autocomplete="off" pattern="[A-Za-z0-9 ]{3,22}"/>
						</td>
						<td><strong class="form_info">3-22 Characters (Letters and numbers only)</strong></td>
					</tr>
				</tbody>
			</table>

			<table>
				<thead>
					<th><td>Name</td><td>Type</td></th>
				</thead>
				<tbody>
					<tr id="addVar">

						<td><a href="#">Add Filed</a></td>
					</tr>
				</tbody>
			</table>

			<p>
				<button type="submit">
					Create
				</button>
			</p>
		</fieldset>
	</form>
</div>
</div>

<script>
	//initialize with 3
	var varCount = 0;
	var $node = "";

	$('form').on('click', '.removeVar', function() {
		$(this).parent().parent().remove();
	});

	$('#addVar').on('click', function() {
		//new node
		varCount++;
		$node = '<tr><td>' + varCount + '</td>' + '<td><input type="text" name="fld_' + varCount + '" id="fld_' + varCount + '" pattern="[A-Za-z0-9 ]{3,22}" required/></td>' + '<td><select name="type_' + varCount + '">' + '<option value="TEXT">Text</option>' + '<option value="INT">Number</option>' + '<option value="float">Float</option>' + '</select><td>' + '<td><span class="removeVar"><a href="#">Remove Variable</a hr></span><td></tr>';
		$(this).parent().before($node);
		$('#size').val(varCount);
	});

</script>